<template>
  <div>
    <el-form ref="form" label-width="100px" :model="form" :rules="formRules">
      <el-tabs>
        <!--        <el-tab-pane label="院校信息">-->
        <!--          <el-form-item label="院校介绍" prop="introduction">-->
        <!--            <tinymce v-model="form.introduction" :height="500" />-->
        <!--          </el-form-item>-->
        <!--        </el-tab-pane>-->
        <el-tab-pane label="院校概况">
          <el-tabs>
            <el-tab-pane label="校园风光">
              <el-form-item label="校园风光">
                <MultiUpload v-model="form.scenes" />
              </el-form-item>
            </el-tab-pane>
            <!--            <el-tab-pane label="招生简章">-->
            <!--              <el-form-item label="招生简章" prop="catalog">-->
            <!--                <tinymce v-model="form.catalog" :height="500" />-->
            <!--              </el-form-item>-->
            <!--            </el-tab-pane>-->
            <el-tab-pane label="填写概况">
              <el-form-item label="学校简介" prop="introduction">
                <tinymce v-model="form.introduction" :height="500" />
              </el-form-item>
              <el-form-item label="师资力量" prop="power">
                <tinymce v-model="form.power" :height="500" />
              </el-form-item>
              <el-form-item label="毕业信息" prop="graduate">
                <tinymce v-model="form.graduate" :height="500" />
              </el-form-item>
              <el-form-item label="知名校友" prop="famous_man">
                <tinymce v-model="form.famous_man" :height="500" />
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="补充信息">
              <el-button type="primary" @click="insert">新增</el-button>
              <el-form label-width="60px" :model="extra_data" :inline="true">
                <div style="margin-top: 40px">
                  <el-tree
                    ref="tree"
                    :data="tree_data"
                    node-key="id"
                    default-expand-all
                    :expand-on-click-node="false"
                  >
                    <div slot-scope="tree_node">
                      <div>
                        <el-form-item label="名称" prop="youth_plan">
                          <el-input v-model="tree_node.data.label" />
                        </el-form-item>
                        <el-form-item label="是否显示" prop="youth_plan">
                          <el-radio-group v-model="tree_node.data.is_show">
                            <el-radio :label="1" border>显示</el-radio>
                            <el-radio :label="2" border>不显示</el-radio>
                          </el-radio-group>
                        </el-form-item>
                        <el-form-item v-if="tree_node.data.is_value_visible" label="内容" prop="youth_plan">
                          <el-input v-model="tree_node.data.value" />
                        </el-form-item>
                        <el-form-item>
                          <el-button
                            v-if="tree_node.data.is_op_visible"
                            type="text"
                            size="mini"
                            @click="() => append(tree_node, tree_node.data)"
                          >
                            子节点
                          </el-button>
                          <el-button
                            type="text"
                            size="mini"
                            @click="() => remove(tree_node.node, tree_node.data)"
                          >
                            删除
                          </el-button>
                        </el-form-item>
                      </div>
                    </div>
                  </el-tree>
                </div>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="开关状态">
              <el-form-item label="校园风光">
                <el-radio-group v-model="form.scene_status">
                  <el-radio v-for="x in switches" :key="x.value" :label="x.value">{{ x.label }}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="学校简介">
                <el-radio-group v-model="form.intro_status">
                  <el-radio v-for="x in switches" :key="x.value" :label="x.value">{{ x.label }}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="师资力量">
                <el-radio-group v-model="form.power_status">
                  <el-radio v-for="x in switches" :key="x.value" :label="x.value">{{ x.label }}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="毕业信息">
                <el-radio-group v-model="form.graduate_status">
                  <el-radio v-for="x in switches" :key="x.value" :label="x.value">{{ x.label }}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="知名校友">
                <el-radio-group v-model="form.famous_status">
                  <el-radio v-for="x in switches" :key="x.value" :label="x.value">{{ x.label }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-tab-pane>
          </el-tabs>
          <el-form-item>
            <el-button type="primary" @click="handleSubmitExtra">保存</el-button>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="院校形象">
          <el-form-item label="院校校徽" prop="icon">
            <UploadImage v-model="form.icon" :width="200" :height="200" path="oss/import/agency/icon/" bucket="new-shengxue985" />
          </el-form-item>
          <el-form-item label="院校主页背景" prop="image">
            <UploadImage v-model="form.image" :width="750" :height="380" path="oss/import/agency/background/" bucket="new-shengxue985" />
          </el-form-item>
          <el-form-item label="视频封面图" prop="cover_image_url">
            <UploadImage v-model="form.cover_image_url" :width="750" :height="380" path="oss/import/agency/cover/" bucket="new-shengxue985" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit">保存</el-button>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>

<script>
import { update, updateAcademy, getAcademy } from '../../api/user'
let id = (new Date()).getTime()
export default {
  components: {
    tinymce: () => import('../../components/Tinymce'),
    MultiUpload: () => import('./components/MultiUpload'),
    UploadImage: () => import('../employee/SxUpload')
  },
  data() {
    return {
      extra_data: {
        youth_plan: '',
        invited_professor: '',
        lecture_professor: '',
        youth_letters: '',
        both_fellow: '',
        ratio: '',
        first_doctor: '',
        famous_man: '',
        first_master: ''
      },
      tree_data: [],
      form: {
        introduction: '',
        power: '',
        graduate: '',
        famous_man: '',
        scenes: [],
        intro_status: 2,
        scene_status: 1,
        power_status: 1,
        graduate_status: 1,
        famous_status: 1,
        icon: '',
        image: '',
        cover_image_url: '',
        extra_data: '',
        catalog: ''
      },
      switches: [
        {
          'label': '关',
          'value': 1
        },
        {
          'label': '开',
          'value': 2
        }
      ],
      formRules: {
        introduction: [
          // { required: true, message: '请输入标题' }
        ],
        catalog: [
          // { required: true, message: '请填写内容' }
        ]
      },
      extraDataRules: {
        introduction: [
          // { required: true, message: '请输入标题' }
        ],
        catalog: [
          // { required: true, message: '请填写内容' }
        ]
      }
    }
  },
  mounted() {
    getAcademy().then((res) => {
      console.log(res)
      this.form.introduction = res.introduction

      if (res.info) {
        this.form.graduate = res.info.graduate
        this.form.famous_man = res.info.famous_man
        this.form.power = res.info.power
        this.form.graduate_status = res.info.graduate_status
        this.form.power_status = res.info.power_status
        this.form.famous_status = res.info.famous_status
        this.form.scene_status = res.info.scene_status
        this.form.intro_status = res.info.intro_status
        this.tree_data = JSON.parse(res.info.extra_data)
      }

      this.form.scenes = res.images.map((v) => {
        return {
          'url': v.image_url
        }
      })
    })
    this.$store.dispatch('user/getInfo').then((data) => {
      this.form.introduction = data.academy_info.introduction ? data.academy_info.introduction : ''
      this.form.catalog = data.academy_info.catalog ? data.academy_info.catalog : ''
      this.form.icon = data.academy_info.icon ? data.academy_info.icon : ''
      this.form.image = data.academy_info.image ? data.academy_info.image : ''
      this.form.cover_image_url = data.academy_info.cover_image_url ? data.academy_info.cover_image_url : ''
    })
  },
  methods: {
    append(tree_node, data) {
      console.log(tree_node)
      const newChild = { id: id++, label: '', value: '', is_show: 1, children: [], is_value_visible: true, is_op_visible: false }
      if (!data.children) {
        this.$set(data, 'children', [])
      }
      data.children.push(newChild)
    },

    remove(node, data) {
      const parent = node.parent
      const children = parent.data.children || parent.data
      const index = children.findIndex(d => d.id === data.id)
      children.splice(index, 1)
    },

    renderContent(h, { node, data, store }) {
      return (
        <span class='custom-tree-node'>
          <span>{node.label}</span>
          <span>
            <el-button size='mini' type='text' on-click={ () => this.append(data) }>Append</el-button>
            <el-button size='mini' type='text' on-click={ () => this.remove(node, data) }>Delete</el-button>
          </span>
        </span>)
    },
    insert() {
      const newChild = { id: id++, label: '', value: '', is_show: 1, children: [], is_value_visible: false, is_op_visible: true }
      this.tree_data.push(newChild)
    },
    handleSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const data = Object.assign({}, this.form)
          update(data).then(() => {
            // this.$router.push({
            //   name: 'moment-index'
            // })
            this.$message.success('保存成功')
          })
        } else {
          console.log('fail')
          return false
        }
      })
    },
    handleSubmitExtra() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const data = Object.assign({}, {
            extra_data: this.tree_data,
            intro_status: this.form.intro_status,
            power_status: this.form.power_status,
            graduate_status: this.form.graduate_status,
            famous_status: this.form.famous_status,
            scene_status: this.form.scene_status,
            introduction: this.form.introduction,
            catalog: this.form.catalog,
            power: this.form.power,
            famous_man: this.form.famous_man,
            graduate: this.form.graduate,
            images: this.form.scenes.map((v) => {
              return v.url
            })
          })
          updateAcademy(data).then(() => {
            this.$message.success('保存成功')
          })
        } else {
          console.log('fail')
          return false
        }
      })
    }
  }
}
</script>

<style>
.el-tree-node__content {
  /*line-height: 80px;*/
  height: auto;
}
</style>
